<template>
	<view class="plantbox">
		<uni-titles :title="'新建地块'"></uni-titles>
		<view class="Stepbox steponly">
			<u-steps current="0" activeIcon="checkmark" :activeColor="'#64C533'" :inactiveColor="'#A1D6BA'">
				<u-steps-item v-for="(d, index) in steplist" :title="d.name" :key="d.id">
					<view class="steptop" :class="{ act: index <2 }" slot="icon">{{ d.id }}</view>
				</u-steps-item>
			</u-steps>
		</view>
		<uni-tudwhere></uni-tudwhere>
		<uni-onlytitlelist :title="'种植信息'"  >
			<view class="tdchoose mar-top34">
				<view class="fs-28 title">地块类型</view>
				<view class="itembox">
					<view class="item fs-24" @click="changeitem(index)" :class="{ act: act == index }" v-for="(d, index) in list" :key="d.name">{{ d.name }}</view>
				</view>
			</view>
			<uni-inputs :title="'地块名称'" :placeholder="'请输入地块名称'" :margin="[30, 0, 30, 0]"></uni-inputs>
			<uni-inputs :title="'作物名称'" :placeholder="'请选择要种植的作物'" icon readonly :margin="[30, 0, 30, 0]"></uni-inputs>
			<uni-inputs :title="'作物品种'" :placeholder="'请输入作物品种'" :margin="[30, 0, 30, 0]"></uni-inputs>
			<uni-inputs :title="'作物时间'" :placeholder="'请选择时间'" icon readonly :margin="[30, 0, 30, 0]"></uni-inputs>
		</uni-onlytitlelist>
		<uni-lastbtn :text="'保存'" @btnfun="btnfun"></uni-lastbtn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			steplist: [{ name: '创建田块', id: 1 }, { name: '选择种植', id: 2 }, { name: '选择资源', id: 3 }],
			// stepact: 1,
			list: [
				{
					name: '大棚'
				},
				{
					name: '果园'
				},
				{
					name: '大田'
				}
			],
			act: 0
		};
	},
	computed: {},
	onShow() {},
	onHide() {},
	methods: {
		changeitem(index) {
			this.act = index;
		},
		btnfun(){
			uni.navigateTo({
				url: '/subpkg/drawmaps/resources',
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
.tdchoose {
	display: flex;
	align-items: center;
	.title {
		width: 128rpx;
	}
	.itembox {
		display: flex;
		flex: 1;
		border-bottom: 1px solid #e6e6e6;
		padding-bottom: 4rpx;
		.item {
			color: #727272;
			background: #e9e9e9;
			border: 1px solid #a1a1a1;
			border-radius: 8rpx;
			height: 46rpx;
			padding: 0 24rpx;
			line-height: 46rpx;
			margin-right: 24rpx;
		}
		.act {
			color: #12d05c;
			background: #dbffec;
			border-color: #07c160;
		}
	}
}
.steponly{
	margin-bottom: -90rpx;
	    position: relative;
	    z-index: 1;
	    box-sizing: border-box;
}
</style>
